<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>聊天室</title>
    <link rel="icon" href="icon/chat.ico">
    <link rel="stylesheet" href="style/chat-style.css">
    <link rel="stylesheet" href="chat-icon/style.css">
    <!--[if lt IE 9 ]>
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
    <script src="js/lib-flexible.js"></script>
    <style>
        .search { padding: 1em; background: #ffffff; }
        .search input { width: 100%; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; }
        .search button { margin-left: .5em; padding: 4px 0; font-size: 22px; }

        .message { padding: 1em; }
        .message-item {
            margin: 1em 0;
            padding: 10px;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 0 5px 0 #cccccc;
            -moz-box-shadow: 0 0 5px 0 #cccccc;
            box-shadow: 0 0 5px 0 #cccccc;
            background: #ffffff;
        }
        .message-item img {
            display: block;
            margin-right: 1em;
            width: 3.2em;
            height: 3.2em;
            -webkit-border-radius: 1.6em;
            -moz-border-radius: 1.6em;
            border-radius: 1.6em;
        }
        .message-item > p { margin: 1em 0 0 4.2em; word-break: break-all; }
        .message-item > p [class*="chat-icon-"] { line-height: inherit; vertical-align: middle }
        .message > div:first-child { margin-top: 0; }
        .message > div:last-child { margin-bottom: 0; }
    </style>
</head>
<body>
<div id="app" class="chat-wrap bg-grey" v-cloak>
    <div class="chat-content box-shadow bg-grey animated animated-pageIn">
        <header><button onclick="history.go(-1)" class="chat-header-btn__left chat-icon-turn-left"></button>通讯录<button class="chat-header-btn__right chat-icon-more"></button></header>
        <div class="chat-body">
            <div class="search box-shadow flex">
                <div class="flex-item"><input v-model="search_text" type="text" placeholder="请输入昵称关键字"></div>
                <div><button @click="searchSubmit" class="chat-icon-search"></button></div>
            </div>
            <div class="message">
                <div v-for="(i, index) in message" class="message-item">
                    <div class="flex">
                        <div><img src="" :src="i.image" alt="头像"></div>
                        <div class="flex-item">
                            <p class="color-light">{{ i.name }}</p>
                            <p class="color-lightest">{{ i.time }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            search_text: '',
            message: [
                { type: 1, image: 'icon/chat.ico', name: 'lotency', time: '1分钟前' },
                { type: 1, image: 'icon/chat.ico', name: '络绎不绝', time: '1小时前' },
                { type: 1, image: 'icon/chat.ico', name: '毫不犹豫', time: '2天前' },
                { type: 1, image: 'icon/chat.ico', name: '乖乖女', time: '2月前' },
                { type: 1, image: 'icon/chat.ico', name: '颜月', time: '1年前' }
            ]
        },
        methods: {
            searchSubmit: function () {
                console.log(this.search_text);
                this.search_text = '';
            }
        }
    });
</script>
</body>
</html>